<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/default}">
<head>
    <meta charset="UTF-8">
    <title>预测分析</title>
    <style>
        .container { max-width: 1200px; margin: 0 auto; padding: 20px; }
        .header { display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center; }
        .card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .card-header { font-weight: bold; font-size: 18px; margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center; }
        .tabs { display: flex; border-bottom: 1px solid #ddd; margin-bottom: 20px; }
        .tab { padding: 10px 15px; cursor: pointer; border-bottom: 2px solid transparent; }
        .tab.active { border-bottom: 2px solid var(--primary-color); color: var(--primary-color); font-weight: bold; }
        .filter-row { display: flex; gap: 15px; margin-bottom: 20px; flex-wrap: wrap; }
        .filter-item { min-width: 200px; }
        .filter-item label { display: block; margin-bottom: 5px; font-size: 14px; }
        .filter-item select, .filter-item input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        .btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; }
        .btn-primary { background-color: var(--primary-color); color: white; }
        .btn-secondary { background-color: #f5f5f5; color: #333; border: 1px solid #ddd; }
        .btn-sm { padding: 4px 8px; font-size: 12px; }
        .chart-container { height: 300px; margin-bottom: 20px; }
        .model-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin-bottom: 30px; }
        .model-card { cursor: pointer; transition: transform 0.2s; }
        .model-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
        .model-title { font-weight: bold; margin-bottom: 5px; }
        .model-description { font-size: 14px; color: #666; margin-bottom: 15px; }
        .model-stats { display: flex; justify-content: space-between; font-size: 13px; color: #555; }
        .prediction-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        .prediction-table th, .prediction-table td { padding: 12px; text-align: left; border-bottom: 1px solid #ddd; }
        .prediction-table th { background-color: #f5f5f5; }
        .prediction-metrics { display: flex; gap: 20px; margin-bottom: 20px; }
        .prediction-metric { flex: 1; text-align: center; padding: 15px; background-color: #f9f9f9; border-radius: 8px; }
        .metric-value { font-size: 24px; font-weight: bold; margin: 5px 0; }
        .metric-label { font-size: 14px; color: #666; }
        .high-risk { color: #dc3545; }
        .medium-risk { color: #ffc107; }
        .low-risk { color: #28a745; }
        .prediction-actions { margin-top: 20px; }
    </style>
</head>
<body>
    <div layout:fragment="content">
        <div class="container">
            <div class="header">
                <h1>预测分析</h1>
                <div>
                    <button class="btn btn-primary" onclick="openModelBuilder()">创建新模型</button>
                </div>
            </div>
            
            <div class="tabs">
                <div class="tab active" onclick="switchTab('models')">预测模型</div>
                <div class="tab" onclick="switchTab('churn')">客户流失预测</div>
                <div class="tab" onclick="switchTab('revenue')">收入预测</div>
                <div class="tab" onclick="switchTab('inventory')">库存优化</div>
                <div class="tab" onclick="switchTab('ltv')">客户价值预测</div>
            </div>
            
            <!-- 预测模型标签内容 -->
            <div id="models-content" class="tab-content">
                <div class="filter-row">
                    <div class="filter-item">
                        <label>模型类型</label>
                        <select id="modelTypeFilter" onchange="filterModels()">
                            <option value="all">所有类型</option>
                            <option value="classification">分类模型</option>
                            <option value="regression">回归模型</option>
                            <option value="time-series">时间序列</option>
                            <option value="clustering">聚类模型</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>状态</label>
                        <select id="modelStatusFilter" onchange="filterModels()">
                            <option value="all">所有状态</option>
                            <option value="active">已部署</option>
                            <option value="training">训练中</option>
                            <option value="draft">草稿</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>创建日期</label>
                        <select id="creationDateFilter" onchange="filterModels()">
                            <option value="all">所有时间</option>
                            <option value="week">本周</option>
                            <option value="month">本月</option>
                            <option value="quarter">本季度</option>
                        </select>
                    </div>
                </div>
                
                <div class="model-cards">
                    <!-- 客户流失预测模型 -->
                    <div class="card model-card" onclick="viewModelDetails('churn')">
                        <div class="model-title">客户流失预测</div>
                        <div class="model-description">预测未来30天可能流失的客户，基于行为和交互数据</div>
                        <div>
                            <div style="margin-bottom: 10px;">
                                <span style="display: inline-block; width: 10px; height: 10px; background-color: #28a745; border-radius: 50%; margin-right: 5px;"></span>
                                <span style="font-size: 14px;">已部署</span>
                            </div>
                        </div>
                        <div class="model-stats">
                            <div>准确率: 87%</div>
                            <div>上次运行: 2023-07-15</div>
                        </div>
                    </div>
                    
                    <!-- 销售额预测模型 -->
                    <div class="card model-card" onclick="viewModelDetails('revenue')">
                        <div class="model-title">销售额预测</div>
                        <div class="model-description">基于历史数据预测未来3个月的销售趋势和收入</div>
                        <div>
                            <div style="margin-bottom: 10px;">
                                <span style="display: inline-block; width: 10px; height: 10px; background-color: #28a745; border-radius: 50%; margin-right: 5px;"></span>
                                <span style="font-size: 14px;">已部署</span>
                            </div>
                        </div>
                        <div class="model-stats">
                            <div>准确率: 91%</div>
                            <div>上次运行: 2023-07-10</div>
                        </div>
                    </div>
                    
                    <!-- 客户价值预测模型 -->
                    <div class="card model-card" onclick="viewModelDetails('ltv')">
                        <div class="model-title">客户终身价值预测</div>
                        <div class="model-description">预测客户在未来24个月内的潜在价值</div>
                        <div>
                            <div style="margin-bottom: 10px;">
                                <span style="display: inline-block; width: 10px; height: 10px; background-color: #ffc107; border-radius: 50%; margin-right: 5px;"></span>
                                <span style="font-size: 14px;">训练中</span>
                            </div>
                        </div>
                        <div class="model-stats">
                            <div>预计完成: 2023-07-22</div>
                            <div>进度: 75%</div>
                        </div>
                    </div>
                    
                    <!-- 库存优化模型 -->
                    <div class="card model-card" onclick="viewModelDetails('inventory')">
                        <div class="model-title">库存优化预测</div>
                        <div class="model-description">预测产品需求和最佳库存水平，减少库存成本</div>
                        <div>
                            <div style="margin-bottom: 10px;">
                                <span style="display: inline-block; width: 10px; height: 10px; background-color: #28a745; border-radius: 50%; margin-right: 5px;"></span>
                                <span style="font-size: 14px;">已部署</span>
                            </div>
                        </div>
                        <div class="model-stats">
                            <div>准确率: 84%</div>
                            <div>上次运行: 2023-07-05</div>
                        </div>
                    </div>
                    
                    <!-- 市场细分模型 -->
                    <div class="card model-card" onclick="viewModelDetails('segment')">
                        <div class="model-title">市场细分聚类</div>
                        <div class="model-description">根据客户属性和行为自动将客户分为不同市场细分</div>
                        <div>
                            <div style="margin-bottom: 10px;">
                                <span style="display: inline-block; width: 10px; height: 10px; background-color: #28a745; border-radius: 50%; margin-right: 5px;"></span>
                                <span style="font-size: 14px;">已部署</span>
                            </div>
                        </div>
                        <div class="model-stats">
                            <div>聚类数量: 5</div>
                            <div>上次运行: 2023-06-20</div>
                        </div>
                    </div>
                    
                    <!-- 价格优化模型 -->
                    <div class="card model-card" onclick="viewModelDetails('pricing')">
                        <div class="model-title">价格优化模型</div>
                        <div class="model-description">根据需求弹性和市场因素预测最佳定价策略</div>
                        <div>
                            <div style="margin-bottom: 10px;">
                                <span style="display: inline-block; width: 10px; height: 10px; background-color: #dc3545; border-radius: 50%; margin-right: 5px;"></span>
                                <span style="font-size: 14px;">草稿</span>
                            </div>
                        </div>
                        <div class="model-stats">
                            <div>创建于: 2023-07-01</div>
                            <div>未部署</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 客户流失预测标签内容 -->
            <div id="churn-content" class="tab-content" style="display: none;">
                <div class="filter-row">
                    <div class="filter-item">
                        <label>预测时间范围</label>
                        <select id="churnTimeFilter" onchange="updateChurnPrediction()">
                            <option value="7">未来7天</option>
                            <option value="30" selected>未来30天</option>
                            <option value="90">未来90天</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>客户类型</label>
                        <select id="churnCustomerFilter" onchange="updateChurnPrediction()">
                            <option value="all">所有客户</option>
                            <option value="enterprise">企业客户</option>
                            <option value="smb">中小企业</option>
                            <option value="individual">个人客户</option>
                        </select>
                    </div>
                    <div class="filter-item">
                        <label>风险等级</label>
                        <select id="churnRiskFilter" onchange="updateChurnPrediction()">
                            <option value="all">所有风险</option>
                            <option value="high">高风险</option>
                            <option value="medium">中风险</option>
                            <option value="low">低风险</option>
                        </select>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">
                        <div>流失风险概览</div>
                        <div>
                            <button class="btn btn-sm btn-secondary" onclick="exportChurnData('csv')">导出CSV</button>
                            <button class="btn btn-sm btn-secondary" onclick="exportChurnData('excel')">导出Excel</button>
                        </div>
                    </div>
                    
                    <div class="prediction-metrics">
                        <div class="prediction-metric">
                            <div class="metric-label">预计流失客户数</div>
                            <div class="metric-value">47</div>
                            <div style="font-size: 13px;">占总客户的 5.6%</div>
                        </div>
                        <div class="prediction-metric">
                            <div class="metric-label">预计流失收入</div>
                            <div class="metric-value">¥286,500</div>
                            <div style="font-size: 13px;">占年收入的 12.2%</div>
                        </div>
                        <div class="prediction-metric">
                            <div class="metric-label">预测准确率</div>
                            <div class="metric-value">87%</div>
                            <div style="font-size: 13px;">基于历史数据验证</div>
                        </div>
                        <div class="prediction-metric">
                            <div class="metric-label">模型召回率</div>
                            <div class="metric-value">83%</div>
                            <div style="font-size: 13px;">成功识别实际流失客户比率</div>
                        </div>
                    </div>
                    
                    <div class="chart-container">
                        <img src="https://via.placeholder.com/1100x300?text=客户流失风险分布图表" alt="客户流失风险分布" style="width: 100%; height: 100%; object-fit: cover;">
                    </div>
                    
                    <table class="prediction-table">
                        <thead>
                            <tr>
                                <th>客户ID</th>
                                <th>客户名称</th>
                                <th>流失概率</th>
                                <th>风险等级</th>
                                <th>年收入贡献</th>
                                <th>最近活动</th>
                                <th>合同到期</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>C10052</td>
                                <td>天宇科技有限公司</td>
                                <td>87%</td>
                                <td><span class="high-risk">高风险</span></td>
                                <td>¥120,000</td>
                                <td>63天前</td>
                                <td>15天后</td>
                                <td>
                                    <button class="btn btn-sm btn-secondary" onclick="createTask('C10052')">创建任务</button>
                                </td>
                            </tr>
                            <tr>
                                <td>C10128</td>
                                <td>蓝光网络科技</td>
                                <td>76%</td>
                                <td><span class="high-risk">高风险</span></td>
                                <td>¥85,000</td>
                                <td>45天前</td>
                                <td>30天后</td>
                                <td>
                                    <button class="btn btn-sm btn-secondary" onclick="createTask('C10128')">创建任务</button>
                                </td>
                            </tr>
                            <tr>
                                <td>C10324</td>
                                <td>远航物流有限公司</td>
                                <td>65%</td>
                                <td><span class="medium-risk">中风险</span></td>
                                <td>¥65,000</td>
                                <td>28天前</td>
                                <td>60天后</td>
                                <td>
                                    <button class="btn btn-sm btn-secondary" onclick="createTask('C10324')">创建任务</button>
                                </td>
                            </tr>
                            <tr>
                                <td>C10429</td>
                                <td>恒信金融服务</td>
                                <td>58%</td>
                                <td><span class="medium-risk">中风险</span></td>
                                <td>¥92,000</td>
                                <td>35天前</td>
                                <td>95天后</td>
                                <td>
                                    <button class="btn btn-sm btn-secondary" onclick="createTask('C10429')">创建任务</button>
                                </td>
                            </tr>
                            <tr>
                                <td>C10587</td>
                                <td>明星传媒集团</td>
                                <td>32%</td>
                                <td><span class="low-risk">低风险</span></td>
                                <td>¥78,000</td>
                                <td>14天前</td>
                                <td>120天后</td>
                                <td>
                                    <button class="btn btn-sm btn-secondary" onclick="createTask('C10587')">创建任务</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <div class="prediction-actions">
                        <button class="btn btn-primary" onclick="createBatchTasks()">创建批量跟进任务</button>
                        <button class="btn btn-secondary" onclick="scheduleReport()">安排定期报告</button>
                    </div>
                </div>
            </div>
            
            <!-- 其他标签内容可以根据需要添加 -->
        </div>
    </div>

    <th:block layout:fragment="scripts">
        <script>
            function openModelBuilder() {
                alert('打开模型构建器');
            }
            
            function switchTab(tab) {
                // 隐藏所有标签内容
                document.querySelectorAll('.tab-content').forEach(content => {
                    content.style.display = 'none';
                });
                
                // 取消所有标签的激活状态
                document.querySelectorAll('.tab').forEach(t => {
                    t.classList.remove('active');
                });
                
                // 显示选中的标签内容
                document.getElementById(tab + '-content').style.display = 'block';
                
                // 激活选中的标签
                document.querySelector(`.tab[onclick="switchTab('${tab}')"]`).classList.add('active');
            }
            
            function filterModels() {
                const type = document.getElementById('modelTypeFilter').value;
                const status = document.getElementById('modelStatusFilter').value;
                const date = document.getElementById('creationDateFilter').value;
                
                alert('筛选模型: 类型=' + type + ', 状态=' + status + ', 创建日期=' + date);
                // 这里应该是实际的AJAX请求更新数据
            }
            
            function viewModelDetails(modelId) {
                alert('查看模型详情: ' + modelId);
                // 这里应该是实际的跳转或显示详情的逻辑
            }
            
            function updateChurnPrediction() {
                const time = document.getElementById('churnTimeFilter').value;
                const customer = document.getElementById('churnCustomerFilter').value;
                const risk = document.getElementById('churnRiskFilter').value;
                
                alert('更新流失预测: 时间=' + time + '天, 客户类型=' + customer + ', 风险=' + risk);
                // 这里应该是实际的AJAX请求更新数据
            }
            
            function exportChurnData(format) {
                alert('导出流失预测数据为' + format.toUpperCase() + '格式');
            }
            
            function createTask(customerId) {
                alert('为客户 ' + customerId + ' 创建跟进任务');
            }
            
            function createBatchTasks() {
                alert('为所有高风险客户创建批量跟进任务');
            }
            
            function scheduleReport() {
                alert('设置流失预测定期报告');
            }
        </script>
    </th:block>
</body>
</html> 